<html>
<head><style>

.tabs 
{
  font:system;
  behavior:tabs;
  height:100%%;
  width:100%%;
  overflow:hidden;
}

.tabs > .strip /* tab strip */
{
  flow: horizontal;
  margin-bottom:-1px;
  padding: 2px 2px 0 2px;
}

.tabs > .strip > [panel] /* all tabs, passive by default */
{
  padding: 3px 8px;
  margin-bottom:1px;
  height: 100%%;
  max-width: auto; /* not wider than max-intrinsic  */
  background-image:url(theme:tab-item-normal);
  background-repeat:stretch;
}
.tabs > .strip > [panel]:hover /* passive tab */
{
  background-image:url(theme:tab-item-hover);
  transition:blend;
}
.tabs > .strip > [panel]:current  /*active tab*/
{
  background-image:url(theme:tab-item-selected);
  margin:-2px -2px -1px -2px;
  padding: 4px 10px 5px 10px; 
  position:relative;
}
.tabs > .strip > [panel]:current:hover /*active tab*/
{
  background-image:url(theme:tab-item-selected);
  transition:none;
}

.tabs > .strip > [panel]:current:first-child,
.tabs > .strip > [panel]:current:hover:first-child
{
  background-image:url(theme:tab-item-leftmost-selected);
}


/*.tabs:focus .strip [panel]:current 
{
  background-image:url(theme:tab-item-focused);
}*/

.tabs:tab-focus > .strip > [panel]:current > * /* outline active tab content if we've gotten focus by tab*/
{
  outline: 1px dotted invert;
}

.tabs > [name] { display:none; }

.tabs > [name]:expanded 
{ 
  background-image:url(theme:tab-panel);
  background-repeat:stretch;
  padding:4px;
  display:block; 
  height:100%%;
}

/* second, light tabs */

#second.tabs > .strip /* tab strip */
{
  margin-bottom:0px;
  padding: 4px 10px -1px 10px;
  background-color: window window threedface threedface;
  border-bottom:1px solid threedshadow;  
}

#second.tabs > [name]:expanded /* current, presented tab */
{ 
  background-image:none;
  padding:4px;
  display:block; 
  height:100%%;
}

/* third, tabs on bottom */

#third.tabs > .strip /* tab strip */
{
  margin-bottom:0px;
  padding: -1px 10px 4px 10px;
  background-color: threedface threedface window window;
  border-top:1px solid threedshadow;
}

#third.tabs > [name]:expanded /* current, presented tab */
{ 
  background-image:none;
  padding:4px;
  display:block; 
  height:100%%;
}

#third.tabs > .strip > [panel] /* all tabs, passive by default */
{
  padding: 3px 8px;
  height: 100%%;
  max-width: auto; /* not wider than max-intrinsic  */
  background-image:none;
  border: 1px solid transparent;
}
#third.tabs > .strip > [panel]:hover /* passive tab */
{
  background-image:none;
  transition:blend;
  color:blue;
}
#third.tabs > .strip > [panel]:current  /*active tab*/
{
  background-image:none;
  background-color:window;
  margin:-1px -2px -2px -2px;
  padding: 4px 10px 5px 10px; 
  position:relative;
  border: 1px solid threedshadow;
  border-top: 1px solid transparent;
}
#third.tabs > .strip > [panel]:current:hover /*active tab*/
{
  background-image:none;
}


</style></head>

<body>
   <div class="tabs" #test>
      <div class="strip" role="page-tab-list"> <!-- our tab strip, can be placed on any side of tab container. -->
         <div panel="panel-id1" selected role="page-tab">tab1 caption</div>
         <div panel="panel-id2" role="page-tab">tab2 caption</div>
         <div panel="panel-id3" role="page-tab">tab3 caption</div>         
      </div>
      <div name="panel-id1"> first panel content 
      <select name="country" size=1>
        <OPTION VALUE=1 >Afghanistan</OPTION>
        <OPTION VALUE=2 >Albania</OPTION>
        <OPTION VALUE=3 >Algeria</OPTION>
        <OPTION VALUE=4 >American Samoa</OPTION>
      </select> 
      </div>
      <div name="panel-id2"> second panel content <button>Test1</button> </div>
      <div name="panel-id3"> third panel content </div>      
   </div>
   <p>light version of the tab:</p>
   <div class="tabs" id="second">
      <div class="strip"> <!-- our tab strip, can be placed on any side of tab container. -->
         <div panel="panel-id1" selected>tab1 caption</div>
         <div panel="panel-id2">tab2 caption</div>
         <div panel="panel-id3">tab3 caption</div>         
      </div>
      <div name="panel-id1" selected> first panel content </div>
      <div name="panel-id2" > second panel content </div>
      <div name="panel-id3" > third panel content <img src="res:activity.gif"> </div>      
   </div>
   <p>tabs on bottom:</p>
   <div class="tabs" id="third">
      <div name="panel-id1" selected> first panel content </div>
      <div name="panel-id2" > second panel content </div>
      <div name="panel-id3" > third panel content <img #test src="res:activity.gif"> </div>      
      <div class="strip"> <!-- our tab strip, can be placed on any side of tab container. -->
         <div panel="panel-id1" selected>tab1 caption</div>
         <div panel="panel-id2">tab2 caption</div>
         <div panel="panel-id3">tab3 caption</div>         
      </div>
   </div>
   
</body>   
</html>   
